<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div>
  <div>
    <div fxFlex="70">
      <form (ngSubmit)="update()" fxLayout="column" #userForm="ngForm">
        <div class="gv-form-section">
          <div fxLayout="row" *ngIf="user.username">
            <mat-form-field appearance="outline" floatLabel="always">
              <mat-label>Username</mat-label>
              <input matInput placeholder="Username" disabled name="username" [value]="user.username" required>
              <mat-hint>The username of the User.</mat-hint>
            </mat-form-field>
          </div>
          <div fxLayout="row">
            <mat-form-field *ngIf="user.firstName || user.internal" appearance="outline" floatLabel="always" style="margin-right: 20px;">
              <mat-label>First name</mat-label>
              <input matInput type="text" placeholder="First name" [disabled]="!editMode() || !canEdit" #firstName="ngModel" name="firstName" [(ngModel)]="user.firstName" required>
              <mat-hint *ngIf="editMode()">The first name of the User.</mat-hint>
              <mat-error *ngIf="firstName.errors?.required">Enter first name</mat-error>
            </mat-form-field>
            <mat-form-field *ngIf="user.lastName || user.internal" appearance="outline" floatLabel="always">
              <mat-label>Last name</mat-label>
              <input matInput type="text" placeholder="Last name" [disabled]="!editMode() || !canEdit" #lastName="ngModel" name="lastName" [(ngModel)]="user.lastName" required>
              <mat-hint *ngIf="editMode()">The last name of the User.</mat-hint>
              <mat-error *ngIf="lastName.errors?.required">Enter last name</mat-error>
            </mat-form-field>
          </div>
          <div fxLayout="row" *ngIf="user.email || user.internal">
            <mat-form-field appearance="outline" floatLabel="always">
              <mat-label>Email</mat-label>
              <input matInput placeholder="Email" [disabled]="!editMode() || !canEdit" #email="ngModel" name="email" [(ngModel)]="user.email" [email]="user.email !== ''" required>
              <mat-hint *ngIf="editMode()">Email address for the User.</mat-hint>
              <mat-error *ngIf="email.errors?.required">Enter email</mat-error>
              <mat-error *ngIf="user.email && email.errors?.email">Not a valid email</mat-error>
            </mat-form-field>
          </div>
          <div *ngIf="!isOrganizationUserAction() && editMode() && canEdit">
            <app-select-applications [selectedApp]="user.applicationEntity" (onSelectApp)="onAppSelectionChanged($event)" (onRemoveApp)="onAppDeleted($event)"></app-select-applications>
          </div>
        </div>
        <div class="gv-form-section" *ngIf="!isEmptyObject(user.additionalInformation) || editMode()">
          <div class="gv-form-section-title">
            <h5>Additional information</h5>
            <small>Custom information about the user. These details are available in the user's profile.</small>
            <mat-divider></mat-divider>
          </div>
          <div>
            <a (click)="addDynamicComponent()" class="gv-accent-link" *ngIf="editMode() && canEdit">(+) add user attribute</a>
            <template #dynamic></template>
            <div *ngFor="let keyValuePair of user.additionalInformation | mapToIterable">
              <div *ngIf="keyValuePair.value && !asObject(keyValuePair.value)" fxLayout="row">
                <mat-form-field style="margin-right: 20px;" fxFlex="40">
                  <input matInput type="text" name="claimName" [value]="keyValuePair.key" disabled>
                </mat-form-field>
                <mat-form-field>
                  <input matInput type="text" [name]="'claimValue'+keyValuePair.key" [(ngModel)]="user.additionalInformation[keyValuePair.key]" (change)="formChanged = true;" [disabled]="!editMode()">
                </mat-form-field>
                <button mat-icon-button *ngIf="editMode()" (click)="removeExistingClaim(keyValuePair.key, $event)"><mat-icon>clear</mat-icon></button>
              </div>
              <div *ngIf="keyValuePair.value && asObject(keyValuePair.value)" fxLayout="row">
                <mat-form-field style="margin-right: 20px; vertical-align: middle;" fxFlex="40">
                  <input matInput type="text" name="claimName" [value]="keyValuePair.key" disabled>
                </mat-form-field>
                <mat-form-field>
                  <!-- do not allow edition of this fields because it is JSON Object -->
                  <input matInput type="text" [name]="'claimValue'+keyValuePair.key" [value]="user.additionalInformation[keyValuePair.key] | json" disabled>
                 </mat-form-field>
                 <button mat-icon-button *ngIf="editMode()" (click)="removeExistingClaim(keyValuePair.key, $event)"><mat-icon>clear</mat-icon></button>
              </div>
            </div>
          </div>
        </div>

        <div class="gv-form-section" *ngIf="canEdit && user.referenceType === 'domain'">
          <div class="gv-form-section-title">
            <h5>Actions</h5>
            <mat-divider></mat-divider>
          </div>
          <div fxLayout="column">
            <div fxLayout="column" style="padding: 20px;">
              <mat-slide-toggle
                (change)="enableUser($event)"
                [checked]="isUserEnabled()" [disabled]="organizationContext">
                Enable User
              </mat-slide-toggle>
              <mat-hint style="font-size: 75%;">Enable or disable user to restrict application access.
                By disabled the user, he will not be able to log to their applications.</mat-hint>
            </div>
            <div fxLayout="column" *ngIf="editMode() && user.preRegistration && !user.registrationCompleted">
              <mat-divider></mat-divider>
              <div fxLayout="row" style="padding: 20px;">
                <div fxLayout="column" fxFlex="75">
                  <div fxLayout="row" style="color: orange; align-items: center;">
                    <mat-icon>warning</mat-icon>
                    <h4 style="margin: 0; font-weight: 400;">User does not complete registration</h4>
                  </div>
                  <mat-hint style="font-size: 75%;">An email will be sent to the user asking to complete his account.</mat-hint>
                </div>
                <button (click)="resendConfirmationRegistration($event)" mat-stroked-button color="accent">SEND CONFIRMATION</button>
              </div>
            </div>
            <div fxLayout="column" *ngIf="accountLocked(user)">
              <mat-divider></mat-divider>
              <div fxLayout="row" style="padding: 20px;">
                <div fxLayout="column" fxFlex="75">
                  <div fxLayout="row" style="color: red; align-items: center;">
                    <mat-icon>blocked</mat-icon>
                    <h4 style="margin: 0; font-weight: 400;">User account is locked</h4>
                  </div>
                  <mat-hint style="font-size: 75%;">The account is locked due to too many failed login attempts. Unlock the user to regain access.</mat-hint>
                </div>
                <button (click)="unlock($event)" mat-stroked-button color="accent">UNLOCK ACCOUNT</button>
              </div>
            </div>
            <div *ngIf="editMode()" fxLayout="column">
              <mat-divider></mat-divider>
              <form (ngSubmit)="resetPassword()" #passwordForm="ngForm" fxLayout="row" style="margin-top: 20px;">
                <mat-form-field style="margin: 0px 15px 0px 15px;" fxFlex="70" appearance="outline" floatLabel="always">
                  <mat-label>Password</mat-label>
                  <input matInput type="password" name="password" placeholder="Password" required [(ngModel)]="password"/>
                  <mat-hint>User's password</mat-hint>
                </mat-form-field>
                <button style="min-width: 180px; height:36px; margin-top: 8px;" mat-stroked-button color="accent" [disabled]="!passwordForm.valid || passwordForm.pristine" type="submit">RESET PASSWORD</button>
              </form>
            </div>
          </div>
        </div>
        <div class="gv-form-section" *ngIf="canEdit && user.referenceType === 'organization'">
          <div class="gv-form-section-title">
            <h5>Actions</h5>
            <mat-divider></mat-divider>
          </div>
          <div fxLayout="column">
            <div *ngIf="editMode()" fxLayout="column">
              <form (ngSubmit)="resetPassword()" #passwordForm="ngForm" fxLayout="row" style="margin-top: 20px;">
                <mat-form-field style="margin: 0px 15px 0px 15px;" fxFlex="70" appearance="outline" floatLabel="always">
                  <mat-label>Password</mat-label>
                  <input matInput type="password" name="password" placeholder="Password" required [(ngModel)]="password"/>
                  <mat-hint>User's password</mat-hint>
                </mat-form-field>
                <button style="min-width: 180px; height:36px; margin-top: 8px;" mat-stroked-button color="accent" [disabled]="!passwordForm.valid || passwordForm.pristine" type="submit">RESET PASSWORD</button>
              </form>
            </div>
          </div>
        </div>
        <div fxLayout="row" *ngIf="editMode() && canEdit">
          <button mat-raised-button color="primary" [disabled]="(!userForm.valid || userForm.pristine) && !formChanged" type="submit">SAVE</button>
        </div>
      </form>
      <div class="gv-page-delete-zone" fxLayout="column" *ngIf="canDelete">
        <p>This operation cannot be undone.</p>
        User will be deleted and will no longer be able to sign in to applications.
        <div class="gv-page-delete-delete-button" fxLayout="row">
          <span fxFlex></span>
          <button mat-raised-button color="warn" (click)="delete($event)">DELETE</button>
        </div>
      </div>
    </div>
    <div class="gv-page-description" fxFlex>
      <h3>User activities</h3>
      <div class="gv-page-description-content">
        <mat-list>
          <mat-list-item>
            <mat-icon mat-list-icon>trending_up</mat-icon>
            <h4 matLine>Logins count</h4>
            <p matLine>{{user.loginsCount}}</p>
          </mat-list-item>
          <mat-list-item>
            <mat-icon mat-list-icon>alarm</mat-icon>
            <h4 matLine>Last login</h4>
            <p matLine>
              <span *ngIf="!(user.loggedAt)">Never logged in</span>
              <span *ngIf="(user.loggedAt)">{{user.loggedAt | humanDate}}</span>
            </p>
          </mat-list-item>
          <mat-list-item>
            <mat-icon mat-list-icon>alarm_on</mat-icon>
            <h4 matLine>Created at</h4>
            <p matLine>{{user.createdAt | humanDate}}</p>
          </mat-list-item>
          <mat-list-item *ngIf="user.referenceType === 'domain'">
            <mat-icon mat-list-icon>dock</mat-icon>
            <h4 matLine>Last application</h4>
            <p matLine>{{displayClientName()}}</p>
          </mat-list-item>
          <mat-list-item>
            <mat-icon mat-list-icon>device_hub</mat-icon>
            <h4 matLine>Identity provider</h4>
            <p matLine>{{user.source}}</p>
          </mat-list-item>
          <mat-list-item *ngIf="accountLocked(user)">
            <mat-icon mat-list-icon>blocked</mat-icon>
            <h4 matLine>Account blocked</h4>
            <p matLine>Until : {{user.accountLockedUntil | date:'medium'}}</p>
          </mat-list-item>
        </mat-list>
      </div>
    </div>
  </div>
</div>
